<!DOCTYPE HTML>
<head>
    <script src="../css3d.js"></script>
    <style>
    </style>
</head>
<body>
<img id="mouse" src="images/mouse.jpg"/>
<script>
    //创建场景
    var s = new C3D.Stage();
    s.size(window.innerWidth, window.innerHeight).material({
        color: "#cccccc"
    }).update();
    document.body.appendChild(s.el);

    //创建1个平面放入场景
    var p = new C3D.Plane();
    p.name('ppp').size(100).position(0, 0, -s.fov).rotation(0, 0, 0).material({
        color: C3D.getRandomColor(),
        image: 'images/mouse.jpg'
    }).filter({blur: ['5px'], brightness: [3]}).class('abg').id('bbb').update();
    s.addChild(p);

    //创建1个图片放入场景
    var p2 = new C3D.Plane({el:document.getElementById('mouse')});
    p2.name('ppp2').size(100).position(0, 200, -s.fov).rotation(0, 0, 0).filter({blur: ['5px'], brightness: [3]}).update();
    s.addChild(p2);


    //创建1个立方体放入场景
    var c = new C3D.Box();
    c.size(100).position(0, -200, -s.fov).rotation(0, 0, 0).visibility({alpha:0.5}).material({
        color: C3D.getRandomColor()
    }).update();
    s.addChild(c);

    //响应屏幕调整尺寸
    function resize() {
        s.size(window.innerWidth, window.innerHeight).update();
        p.position(0, 0, -s.fov).updateT();
        c.position(0, -200, -s.fov).updateT();
        p2.position(0, 200, -s.fov).updateT();
    }

    window.onresize = function () {
        resize();
    };
    resize();

    //刷新场景
    requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame;

    function go() {
        p.rotate(0, 1, 0).updateT();
        c.rotate(0, -1, 0).updateT();

        // sp.move(0, 1, 0).update();

//        s.camera.move(0,0,-1).rotate(0,0.15,0).updateT();

        requestAnimationFrame(go);
    }

    requestAnimationFrame(go);

</script>
</body>
